<!--
 * @Author: hq
 * @Date: 2022-06-02 14:27:01
 * @LastEditors: hq
 * @LastEditTime: 2022-08-31 14:35:47
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div class="detail">
    <el-collapse>
      <el-collapse-item>
        <template slot="title"> 主体信息 </template>
        <div v-if="detailData.length !== 0 && detailData.base">
          <div class="row">
            <div class="col" v-if="detailData.base">
              <div>营业执照：</div>
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.base.url1"
                :preview-src-list="imgArr"
              >
              </el-image>
            </div>
            <div class="col">
              <div>营业执照编号：{{ detailData.base.license_code }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>商户名称：{{ detailData.base.reg_name }}</div>
            </div>
            <div class="col">
              <div>公司类型：{{ detailData.base.ent_type_name }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>
                营业执照有效期类型：{{ detailData.base.license_validity_type }}
              </div>
            </div>
            <div class="col">
              <div>证件类型：中国大陆居民-身份证</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>
                营业执照生效期：{{ detailData.base.license_begin_date }}
              </div>
            </div>
            <div class="col">
              <div>营业执照失效期：{{ detailData.base.license_end_date }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>法人身份证号：{{ detailData.base.legal_cert_no }}</div>
            </div>
            <div class="col">
              <div>法人身份姓名：{{ detailData.base.legal_name }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>证件生效期：{{ detailData.base.legal_cert_begin_date }}</div>
            </div>
            <div class="col">
              <div>证件失效期：{{ detailData.base.legal_cert_end_date }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>
                证件有效期类型：{{
                  detailData.base.legal_cert_validity_type === "0"
                    ? "定期"
                    : "长期"
                }}
              </div>
            </div>
            <div class="col">
              <div>法人身份姓名：{{ detailData.base.legal_name }}</div>
            </div>
          </div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title"> 经营信息 </template>
        <div v-if="detailData.length !== 0 && detailData.biz">
          <div class="row">
            <div class="col">
              <div>商户简称：{{ detailData.biz.short_name }}</div>
            </div>
            <div class="col">
              <div>客服电话：{{ detailData.biz.service_phone }}</div>
            </div>
          </div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title"> 行业资质 </template>
        <div v-if="detailData.length !== 0 && detailData.zz">
          <div class="row">
            <div class="col">
              <div>
                商户简称：{{ detailData.zz.name1 }} -
                {{ detailData.zz.name2 }} - {{ detailData.zz.name3 }}
              </div>
            </div>
          </div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title"> 管理员 </template>
        <div v-if="detailData.length !== 0 && detailData.admin">
          <div class="row">
            <div class="col">
              <div>管理员手机号：{{ detailData.admin.mobile }}</div>
            </div>
            <div class="col">
              <div>管理员邮箱：{{ detailData.admin.email }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col" v-if="detailData.admin">
              <div>管理员身份证：</div>
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.admin.url1"
                :preview-src-list="imgArr"
              >
              </el-image>
              <el-image
                style="width: 100px; height: 100px"
                :src="detailData.admin.url2"
                :preview-src-list="imgArr"
              >
              </el-image>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>管理员身份证姓名：{{ detailData.admin.cert_name }}</div>
            </div>
            <div class="col">
              <div>管理员身份证号：{{ detailData.admin.cert_no }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>管理员户籍地址：{{ detailData.admin.cert_addree }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>
                证件有效期类型：{{
                  detailData.admin.legal_cert_validity_type === "0"
                    ? "定期"
                    : "长期"
                }}
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>证件生效期：{{ detailData.admin.cert_begin_date }}</div>
            </div>
            <div class="col">
              <div>证件失效期：{{ detailData.admin.cert_end_date }}</div>
            </div>
          </div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title"> 结算账户 </template>
        <div v-if="detailData.length !== 0 && detailData.bank">
          <div class="row">
            <div class="col">
              <div>
                支付信息：
                <div
                  v-for="(item, index) in detailData.bank.class"
                  :key="index"
                >
                  {{ item === "wxpay" ? "微信" : "" }}
                  {{ item === "alipay" ? "支付宝" : "" }}
                </div>
              </div>
            </div>
          </div>
          <div class="row" v-if="detailData.bank.alipay">
            <div class="col">
              <div>企业支付宝签约账户：{{ detailData.bank.alipay }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>账户类型：{{ detailData.bank.card_type }}</div>
            </div>
            <div class="col">
              <div>开户名称：{{ detailData.bank.card_name }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>省市：{{ detailData.bank.positionName }}</div>
            </div>
            <div class="col">
              <div>银行账户：{{ detailData.bank.card_no }}</div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div>开户行：{{ detailData.bank.bank_code }}</div>
            </div>
            <div class="col">
              <div>开户支行：{{ detailData.bank.branch_code }}</div>
            </div>
          </div>
          <div class="row"></div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
      <el-collapse-item>
        <template slot="title"> 收款管理 </template>
        <div v-if="extend.length !== 0">
          <div class="row" v-if="extend.wxpay">
            <div class="col">
              <div>
                微信：
                <div class="red">
                  {{ extend.wxpay.msg }} ({{ extend.wxpay.status }})
                </div>
              </div>
            </div>
          </div>
          <div class="row" v-if="extend.alipay">
            <div class="col">
              <div>
                支付宝：
                <div class="red">
                  {{ extend.alipay.msg }} ({{ extend.alipay.status }})
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>暂无</div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { settleInDetail } from "@/api/merchant";
export default {
  props: ["rowData"],
  data() {
    return {
      detailData: {},
      extend: {},
      imgArr: [],
      url1: [],
      url2: [],
      url3: [],
      loading: true,
    };
  },
  methods: {
    async settleInDetail() {
      const { data, err } = await settleInDetail({
        id: this.rowData.id,
      });
      if (err === 0) {
        this.detailData = data.data;
        this.extend = data.extend;
        if (this.detailData.length !== 0) {
          this.imgArr.push(this.detailData.base.url1);
          this.imgArr.push(this.detailData.admin.url1);
          this.imgArr.push(this.detailData.admin.url2);
        }
      }
    },
  },
  created() {
    this.settleInDetail();
  },
};
</script>

<style lang="scss" scoped>
.red {
  color: red;
}
.detail {
  font-size: 13px;
  padding: 0 20px;
  box-sizing: border-box;
  .el-collapse {
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
  }
  /deep/.el-collapse-item__header {
    font-weight: bold;
    background-color: #f7f8fa;
    padding-left: 20px;
    box-sizing: border-box;
    // border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
  }
  /deep/.el-collapse-item__content {
    padding: 10px 20px;
    box-sizing: border-box;
  }

  .ti {
    font-weight: bold;
    margin-bottom: 20px;
  }
  .row {
    display: flex;
    padding: 0 0 10px 20px;
    box-sizing: border-box;

    .col {
      width: 50%;
      display: flex;
      align-items: center;
      div:nth-child(1) {
        flex-shrink: 0;
      }
      div {
        display: flex;
      }
    }
  }
  .tu {
    display: flex;
    flex-wrap: wrap;
    padding-left: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
    .image {
      margin-right: 20px;
      text-align: center;
    }
  }
  .content {
    display: flex;
    .l {
      width: 40%;
    }
    .r {
      width: 60%;
      height: 500px;
    }
  }
}
.imgInfo {
  display: flex;
  padding-left: 20px;
  box-sizing: border-box;
  margin-bottom: 20px;
  .info {
    margin-right: 20px;
  }
}
// /deep/.el-loading-spinner {
//   bottom: -150px !important;
// }
</style>
